<template>
  <h1>杨硕循环指令</h1>
  <ul>
    <li v-for="item in 10">{{item}}</li>
  </ul>
  <ul>
    <li v-for="i in productArr">{{i.title}}</li>
  </ul>
  <table border="1px">
    <tr>
      <th>编号</th>
      <th>商品</th>
      <th>价格</th>
      <th>数量</th>
      <th>操作</th>
    </tr>
    <tr v-for="(p,index) in productArr">
      <td>{{index+1}}</td>
      <td>{{p.title}}</td>
      <td>{{p.price}}</td>
      <td>{{p.num}}</td>
      <td><button @click="del(index)">删掉杨硕</button></td>
    </tr>
  </table>
</template>
<script setup>
import {ref} from "vue";

const productArr=ref([
  {title:"杨硕1",price:100,num:1},
  {title:"杨硕2",price:200,num:2},
  {title:"杨硕3",price:300,num:3},
  {title:"杨硕4",price:400,num:4},
  {title:"杨硕5",price:100,num:5},
  {title:"杨硕6",price:200,num:6},
  {title:"杨硕7",price:300,num:7},
  {title:"杨硕8",price:400,num:8},
  {title:"杨硕9",price:100,num:9},
  {title:"杨硕10",price:200,num:10},
  {title:"杨硕11",price:300,num:11},
  {title:"杨硕12",price:400,num:12}
]);
//定义删除商品的方法
const del=(index)=>{
  if(confirm("你忍心删除吗？")){
    productArr.value.splice(index,1);
  }
}
</script>


<style scoped>

</style>